<template>
  <div class="main-right">
    <!--main-top-->
    <div class="main-top">
      <div class="page-breadcrumb">
        {{$route.meta.title}}
        <el-breadcrumb >
          <template v-for="item in $route.matched">
            <el-breadcrumb-item :to="{ path: item.path }">{{item.meta.title}}</el-breadcrumb-item>
          </template>
        </el-breadcrumb>
      </div>
    </div>
    <!--main-bottom-->
    <div class="main-bottom">
      <div class="main-bottom-screen">
        <el-input  placeholder="请输入内容"></el-input>
        <el-button type="primary" class="fl-right" @click="newItem">添加栏目</el-button>
      </div>
      <div class="main-cont">
        <el-table
          :data="menuData"
          border
          tooltip-effect="dark"
          style="width: 100%">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            label="id"
            width="50">
            <template scope="scope">{{ scope.row.id }}</template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="栏目名称">
          </el-table-column>
          <el-table-column
            prop="title"
            label="标题">
          </el-table-column>
          <el-table-column
            prop="path"
            label="路径">
          </el-table-column>
          <el-table-column
            label="操作"
            width="150"
            show-overflow-tooltip>
            <template scope="scope">
              <el-button type="primary" size="small">编辑</el-button>
              <el-button type="danger" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="main-other">
        <el-pagination
          layout="prev, pager, next"
          :page-size="params.pagination.pageLength"
          :total="params.pagination.pageTotal"
          :current-page="params.pagination.pageNum">
        </el-pagination>
      </div>
    </div>

    <!--editform-->
    <el-dialog :title="editForm.title+'文章'" v-model="editForm.visible" >
      <el-form :model="editForm.data" :rules="editForm.rules" ref="editForm">
        <el-form-item label="栏目名称" prop="title">
          <el-input v-model="editForm.data.title"></el-input>
        </el-form-item>
        <el-form-item label="栏目标志" prop="name">
          <el-input v-model="editForm.data.name"></el-input>
        </el-form-item>
        <el-form-item label="栏目路径" prop="path">
          <el-input v-model="editForm.data.path"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editForm.visible = false">取 消</el-button>
        <el-button type="primary" @click="confirm('editForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import Api from '../../api/index'
  export default {
    data () {
      return {
          menuData:[],
        editForm:{
          data:{
            id:"",
            name:"",
            title:"",
            path:"",
            type:1,
          },
          rules:{
            name:[
              {required:true,message:"请填写标题",trigger:"blur"}
            ],
            title:[
              {required:true,message:"请填写标题",trigger:"blur"}
            ],
            path:[
              {required:true,message:"请填写标题",trigger:"blur"}
            ],
          },
          title:"添加",
          visible:false
        },
        params:{
          pagination:{
            pageNum:1
          },
          screen:"",
          orderby:""
        },
        keyword:""
      }
    },
    methods:{
        getMenus:function () {
          Api.getMenu(this.pagination).then((response)=>{
              if(response.status===200){
                  this.menuData=response.data.menus;
                  this.pagination=response.data.pagination;
              }else{
                  this.$message.error(response.data.error);
              }
          });
        },
      newItem:function () {
        this.editForm.data.id="";
        this.editForm.data.name="";
        this.editForm.data.title="";
        this.editForm.data.path="";
        this.editForm.data.type=1;
        this.editForm.visible=true;
      },
      confirm:function (formName) {
        this.$refs[formName].validate((valid)=>{
            if(valid){
                if(this.editForm.data.id){/*编辑*/

                }else{/*添加*/
                  Api.createMenu(this.editForm.data).then((response)=>{
                      if(response.status===200){
                          this.getMenus();
                          this.$message.success("新增成功");
                          this.editForm.visible=false;
                      }else{
                          this.$message.error(response.data.error);
                      }
                  })
                }
            }
        })
      }
    },
    mounted(){
      this.getMenus();
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
